<template>
  <el-dialog  width="800px" :close-on-click-modal="false" v-model="props.userDialog" @open="getUserInfo" @close="closeForm" v-dialogDrag>
  <div align="center">
    <el-avatar
      :src="userForm.userInfo.avatar"
    />
  </div>
    <div align="center">
      <span>{{userForm.userInfo.realname}}</span>
    </div>
    <el-form :inline="true" :model="userForm.userInfo" align="center">
      <el-form-item label="用户别名">
        <el-input v-model="userForm.userInfo.nickname" disabled />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="userForm.userInfo.gender" disabled >
          <el-option label="男" value="f" />
          <el-option label="女" value="m" />
        </el-select>
      </el-form-item>
        <el-form-item label="账户名称">
          <el-input v-model="userForm.userInfo.account" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.userInfo.email" disabled />
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="userForm.userInfo.company" disabled />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="userForm.userInfo.dept" disabled />
        </el-form-item>
        <!--<el-form-item label="入职">-->
          <!--<el-input v-model="userForm.userInfo.account" disabled />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="权限">-->
          <!--<el-input v-model="userForm.userInfo.role" disabled />-->
        <!--</el-form-item>-->

        <el-divider border-style="dashed" />
        <el-form-item label="手机">
          <el-input v-model="userForm.userInfo.phone" disabled />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="userForm.userInfo.weixin" disabled />
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="userForm.userInfo.mobile" disabled />
        </el-form-item>
        <el-form-item label="qq">
          <el-input v-model="userForm.userInfo.qq" disabled />
        </el-form-item>

        <el-form-item label="邮编">
          <el-input v-model="userForm.userInfo.zipcode" disabled />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="userForm.userInfo.address"  disabled />
        </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script setup>
  import { getUserByName } from '@/api/user'
  import { computed, ref,onMounted ,reactive,defineProps,defineEmits } from 'vue'

  const userForm= reactive({
    userInfo:{}
  })

  let props = defineProps({
    account:{                            // 父组件v-model绑定的值
      type:String,
    },
    userDialog:{
      type: Boolean,
    }
  });


  const getUserInfo=()=>{
    let param={};
    param.account=props.account;
    userForm.userInfo={};
      getUserByName(param).then(res=>{
        if(res.data!=null){
          userForm.userInfo= res.data;
        }

      })
  }

  // 2、定义发射给父组件的方法
  const emits = defineEmits(['update:userDialog'])

  const closeForm=()=>{
    emits('update:userDialog',false);
}

</script>
